<template>
	<view class="billing_content_detail">
        <view class="billing_header">
            <scroll-view style="height: 100%;" scroll-y="true">
                <view class="billing_item" v-for="(item, index) in list" :key="index">

                    <view class="billing_info">
                        <view class="billing_img" v-if="false">
                            <image style="height: 100%; width: 100%;"  src="../../static//login/14.jpg"/>
                        </view>

                        <view class="info_center">
                            <view class="info_center_row">
                                <view style="width: 33%;">货号: {{ item.main.huohaoname }}</view>
                                <view style="width: 67%;">品名: {{ item.main.pm }}</view>
                            </view>

                            <view class="info_center_row">
                                <view style="width: 33%;">单价: {{ item.main.xsprice }}</view>
                                <view style="width: 33%;">数量: {{ item.hjsl }}</view>
                                <view style="width: 34%;">合计价格: ￥ {{ item.hjPrice }}</view>
                            </view>
                        </view>

                        <view  @click="handleNegated(item)" style="display: flex; align-items: flex-end;">
                            {{ !item.showTable ? '查看详情 >>' : '收起 >>' }}
                        </view>
                    </view>

                    <view v-if="item.showTable" style="padding-top: 20rpx;">
                        <!-- <uni-table border stripe emptyText="暂无更多数据" >
                            <uni-tr>
                                <uni-th  width="110" align="center"></uni-th>
                                <uni-th width="110" align="center" v-for="(j, i) in item.data[0].chima" :key="i">
                                    <text v-for="(k,v,n) in j" :key="v">
                                        {{v}}
                                    </text>
                                </uni-th>
                            </uni-tr>
                            <uni-tr v-for="(x, y) in item.data" :key="y">
                                <uni-td align="center" v-if="x.hj != 0">{{ x.color }}</uni-td>
                                <uni-td align="center" v-if="x.hj != 0" v-for="(w, v) in x.chima" :key="v"> 
                                    <text v-for="(k,v,n) in w" :key="v">
                                        <input v-model="w[v]" />
                                    </text>
                                </uni-td>
                            </uni-tr>
                        </uni-table> -->

                        <view @click="handleItem(item)">
                            <uni-table border stripe emptyText="暂无更多数据"  >
                                <uni-tr>
                                    <uni-th  width="110" align="center">颜色/尺码</uni-th>
                                    <uni-th align="center" v-for="(j, i) in item.colorTable[0].chima" :key="i">
                                        {{ i }}
                                    </uni-th>
                                </uni-tr>
                                <uni-tr v-for="(x, y) in item.colorTable" :key="y">
                                    <uni-td align="center" v-if="x.hj != 0">{{ x.color }}</uni-td>
                                    <uni-td align="center" v-if="x.hj != 0" v-for="(w, v) in x.chima" :key="v"> 
                                        {{ w }}
                                    </uni-td>
                                </uni-tr>

                            </uni-table>
                        </view>
                        <!--  -->
                    </view>
                </view>
            </scroll-view>
        </view>

        <!-- 弹出购物组件 -->
        <addGoods
            ref="addGoodsChild"
            @childAddGoods="childAddGoods"
            ></addGoods>

        <!-- 底部 -->
        <view class="shop_footer"></view>
	</view>
</template>

<script>
import customHeader from "@/components/custom-header/custom-header.vue";
import addGoods from '@/components/add-goods/add-goods.vue'; // 引入自定义组件
	export default {
		components: {
			customHeader,
            addGoods,
		},
        props: {
            list: {
                Type: Array,
                default: () => {
                    return []
                }
            },
            changeDis: {
                Type: Boolean,
                default: true
            }
        }, 
		data() {
			return {
			}
		},
        computed: {},
		created() {},
		methods: {
            handleNegated(item) {
                item.showTable = !item.showTable
            },
            placOrder() {
                let a = {a : 111}
                this.$emit('childPlacOrder', a)
            },
            handleItem(item) {
                console.log('== 22 ', this.changeDis)
                if (this.changeDis) return
                this.$refs.addGoodsChild.changeNum(item)
            },

            // 子传父 保存的数据
            childAddGoods(param) {
                console.log('== 修改订单 ', param)
                this.$refs.addGoodsChild.closeDrawer()
                this.$emit('childChangeGwcInfo', param)

            },
           
		}
	}
</script>

<style lang="less" scoped>
.billing_content_detail {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    background: #f5f5f5;
    font-size: 16rpx;

    .billing_header {
        padding-top: 10rpx;
        .billing_item {
            margin-bottom: 20rpx;
            background: #fff;
            padding: 10rpx;

            .billing_info {
                display: flex;


                .billing_img {
                    height: 90rpx;
                    width: 90rpx;
                }

                .info_center {
                    flex: 1;

                    .info_center_row {
                        display: flex;
                        align-items: center;

                    }
                }
            }

        }
    }


}
</style>
